<template>
  <div class="">
    <h1>全选</h1>
    全选按钮<input type="checkbox" v-model="chooseall" @change="change2" />
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input
          type="checkbox"
          v-model="choose"
          :value="item.title"
          @change="change"
        />{{ item.title }}
      </li>
    </ul>

    <!-- 在vue中checkbox 是一家的就有同样的v-model值，选中的value就会被push进这个v-model的数组中 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "七里香",
        },
        {
          title: "发如雪",
        },
        {
          title: "编号89757",
        },
        {
          title: "稻香",
        },
      ],
      chooseall: false,
      choose: ["稻香"],
    };
  },
  mounted() {},
  methods: {
    change() {
      if (this.choose.length == this.list.length) {
        this.chooseall = true;
      } else {
        this.chooseall = false;
      }
    },
    change2() {
      if (this.chooseall == false) {
        this.choose = [];
      } else {
        this.choose = [];
        this.list.forEach((item, index) => {
          this.choose.push(item.title);
        });
      }
    },
  },
};
</script>

<style lang="scss"></style>
